﻿@model WriterStars.Model.Book

@Html.AntiForgeryToken()
@Html.HiddenFor(model => model.Id)
@Html.HiddenFor(model => model.AuthorId)

<style>
    body {
        overflow-y: scroll;
    }
</style>

<div class="form-horizontal">
    
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    @Html.HiddenFor(x => x.CategoryId)
    @Html.HiddenFor(x => x.Content)
    @Html.HiddenFor(x => x.Title)
    @Html.HiddenFor(x => x.Id)

    <div >
        <div class="overlay">
            <div class="wordcount modal">
                <h1>Target Word Count</h1>
                <div>
                    <input type="number" name="quantity" value="0" min="0" />
                </div>
            </div>
            <div class="description modal">
                <h1> About ZenPen </h1>
                <p>
                    Zenpen is a clean and simple writing zone, made by <a href="http://tholman.com">Tim Holman</a> (<a href="http://twitter.com/twholman">@@twholman</a>), to get you into that zone, where you can focus on the writing.
                    <br><br>ZenPen is open source on <a href="http://github.com/tholman/zenpen">Github</a>.
                    <br><br>If you have any questions, hit me up via <a href="mailto:timothy.w.holman@gmail.com">email</a>.
                </p>
            </div>

            <div class="saveoverlay modal">
                <h1>Select save format</h1>
                <p class='saveselection'>
                    <span data-format='markdown'>Markdown</span>
                    <span data-format='html'>HTML</span>
                    <span data-format='plain'>Plain Text</span>
                </p>
                <button type="button" class='savebutton useicons'>&#xe006;</button>
                <div> Or select format and press ctrl+c (cmd+c on mac) to copy the text. </div>
                <textarea class='hiddentextbox'></textarea>
            </div>
        </div>
        <div class="text-options">
            <div class="options">
                <span class="no-overflow">
                    <span class="lengthen ui-inputs">
                        <button type="button" class="url useicons">&#xe005;</button>
                        <input class="url-input" type="text" placeholder="Type or Paste URL here" />
                        <button type="button" class="bold">b</button>
                        <button type="button" class="italic">i</button>
                        <button type="button" class="quote">&rdquo;</button>
                    </span>
                </span>
            </div>
        </div>
        <div class="ui">
            <div class="wrapper">
                <div class="top editing">
                    <button type="button" class="fullscreen useicons" title="Toggle fullscreen">
                        &#xe000;
                    </button>
                    <button type="button" class="color-flip useicons" title="Invert colors">
                        &#xe002;
                    </button>
                    <button type="button" class="target useicons" title="Set target word count">
                        &#xe001;
                    </button>
                    @*<button type="button" class="save useicons" title="Save Text">
                        &#xe003;
                    </button>*@
                </div>
                @*<div class="bottom">
                    <button type="button" class="about">
                        ?
                    </button>
                </div>*@
            </div>
        </div>
        <div class="word-counter">
            <span class="progress"></span>
        </div>
        <section class="section-book">
            <br />
            
            <header contenteditable="true" class="book-title header">
                @Model.Title
            </header>
            <book contenteditable="true" class="book-content content">
                @Html.Raw(Model.Content)
            </book>
        </section>
        <div style="width:600px;margin:auto">

        <div class="form-group">
            <div class="col-md-10">
                <button id="save-btn" type="button" class="btn btn-primary pull-right">Save</button>
            </div>
        </div>
        </div>
        <!-- JS -->
        <script type="text/javascript">
            
            // Initiate ZenPen
            ZenPen.editor.init();
            ZenPen.ui.init();
            
        </script>
    </div>


    @*
    <div class="form-group">
        <div class="col-xs-12">
            @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control writing title", @placeholder = "Title" } })
            @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-10">
            @Html.TextAreaFor(model => model.Content, new {@class = "form-control writing bookContent", @rows = "20", @placeholder="Type your text here . . ." })
            @Html.ValidationMessageFor(model => model.Content, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-12">
            @Html.TextAreaFor(model => model.BriefInfo, new { @class = "form-control writing bookContent", @rows = "4", @placeholder = "Brief info" })
            @Html.ValidationMessageFor(model => model.BriefInfo, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Visible, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-xs-10">
            @Html.CheckBoxFor(model => model.Visible, htmlAttributes: new { @class = "form-control control-label checkbox-big" })
            @Html.ValidationMessageFor(model => model.Visible, "", new { @class = "text-danger" })
        </div>
    </div>
    *@
    
</div>